

<template>
    <div><el-input  placeholder="请输入部门名称" v-model="name" @input="search()"  style="width: 200px;"></el-input><el-button type="primary" icon="el-icon-search" @click="sosuo">搜索</el-button> 
        <el-button type="danger" size="medium" @click="dels" icon="el-icon-delete-solid">批量删除</el-button> <el-button type="success" size="medium" @click="dialogFormVisible=true" icon="el-icon-menu">添加</el-button>
        <el-table :data="Dept" tooltip-effect="dark"  style="width: 100%" @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column  prop="DeptID" label="编号"  width="80"> </el-table-column>
    <el-table-column  prop="DeptName" label="名称"  width="80"> </el-table-column>
    <el-table-column  prop="Remark" label="描述"  width="150"> </el-table-column>
    <el-table-column  prop="LastTime" label="创建时间"  width="160"> </el-table-column>
    <el-table-column label="操作">
            <template #default="{row}">
                <el-popconfirm @confirm="sc(row.DeptID)" confirm-button-text='好的' cancel-button-text='不用了'
                icon="el-icon-info"
                icon-color="red"
                :title="'请问确定要删除名称为'+row.DeptName+'?'"
              >
              <el-button slot="reference" type="danger"  size="mini" icon="el-icon-delete-solid">删除</el-button>
              </el-popconfirm> 
                <el-button type="warning"  @click="xg(row)" size="mini" icon="el-icon-s-promotion" style="margin-left: 10px;">修改</el-button>
            </template>
          </el-table-column>
  </el-table>
  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[3,6,8,20]"
      :page-size="limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="count">
    </el-pagination>

    <el-dialog title="添加部门" :visible.sync="dialogFormVisible" :modal="false" >
      <add :dialogAdd.sync="dialogFormVisible" @gx="search"></add>
    </el-dialog>
    <el-dialog title="修改部门" :visible.sync="dialogUpdateVisible" :modal="false">
          <update :dialogUpdate.sync="dialogUpdateVisible" :data="content" @gx="search"></update>
    </el-dialog>
    
</div>


  </template>

<script>

import add from './Add.vue'
import update from './Update.vue'
export default {
    name:'menu',
    data(){
        return {
          Dept:[],
            multipleSelection: [],
            name:'',
            page:1,
            limit:3,
            count:0,
            dialogFormVisible:false,
            dialogUpdateVisible:false,
            content:{}
            
           

        }
    },
    components:{add,update},
    methods:{
     

        handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      search(){
        this.axios({
    method:"get",
    url:"Dept/Page",
    params:{name:this.name,page:this.page,size:this.limit}
   }).then(res=>{
    console.log(res)
    
   
    this.Dept=res.data;
    this.count=res.count;
   
   })

      },
        handleSizeChange(val) {
       
        this.limit=val
        this.search()
      },
      handleCurrentChange(val) {
        this.page=val
        this.search()
      },
      dels(){
        const ids=[];
        const names=[];
        this.multipleSelection.forEach(zhi=>{
          ids.push(zhi.DeptID)
          names.push(zhi.DeptName)
        })
        if(ids.length==0){
          this.$message({type:"danger",message:"请选择要删除的行"})
      
          return;

        }
        this.$confirm('你确定要删除'+names+'?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
         this.axios({
          method:"delete",
          url:"Dept/Deletes",
          data:ids
         }).then(res=>{
          if(res.code==1){
            this.$message({type:"success",message:res.msg})
           this.search();
          }else{
            this.$message({type:"danger",message:res.msg})
          }
         })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
   
      
      
      },
      sc(id){
            this.axios({
                method:'delete',
                url:'Dept',
                params:{id:id}
            }).then(res=>{
                if(res.code>0){
                  this.$message({ type:'success', message:res.msg})
                 this.search();
                }else{
                  this.$message({ type:'danger', message:res.msg})
                }
            })
        },xg(data){
          this.dialogUpdateVisible=true;
          
          this.content=JSON.parse(JSON.stringify(data));

        },
        sosuo(){
          this.search();
        }
    }
    ,
    created(){
    this.search();
    }

}
</script>

